<template>
  <div>
    <div>订单详情</div>
    <el-steps :space="200" :active="1" align-center>
      <el-step title="提交订单" icon="el-icon-success"></el-step>
      <el-step title="支付订单" icon="el-icon-info"></el-step>
      <el-step title="待发货" icon="el-icon-info"></el-step>
      <el-step title="待收货" icon="el-icon-info"></el-step>
      <el-step title="已收货" icon="el-icon-info"></el-step>
    </el-steps>
    <div class="btn">
      <div class="status">当前状态：待付款</div>
      <el-button @click="dialogTableVisible = true" class="detail">
        备注详情
      </el-button>
      <el-button type="primary" @click="dialogFormVisible = true" class="add">
        添加备注
      </el-button>
    </div>
    <div class="border">
      <p>基本信息</p>
    </div>
    <el-table :data="orderDetail" border style="width: 100%">
      <el-table-column prop="OrderNum" label="订单编号"> </el-table-column>
      <el-table-column label="会员账号">
        <template slot-scope="scope">
          {{ scope.row.phone }}
          <el-button type="text">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="pyment_method" label="支付方式"> </el-table-column>
      <el-table-column prop="paymentcode" label="支付单号"> </el-table-column>
      <el-table-column prop="createAt" label="提货日期"> </el-table-column>
      <el-table-column prop="shoppingAdd" label="提货门店"> </el-table-column>
    </el-table>
    <div class="border">
      <p>收货人信息</p>
    </div>
    <el-table :data="orderDetail" border style="width: 100%">
      <el-table-column prop="consignee" label="收货人"> </el-table-column>
      <el-table-column prop="phone" label="联系电话"> </el-table-column>
      <el-table-column prop="shoppingAdd" label="收货地址"> </el-table-column>
    </el-table>
    <div class="border">
      <p>商品信息</p>
    </div>
    <el-table :data="ProductList" border style="width: 100%">
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.gallery" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="cateName" label="商品名称"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="originalPrice" label="规格"> </el-table-column>
      <el-table-column prop="stock" label="数量"> </el-table-column>
      <el-table-column prop="stock" label="小计"> </el-table-column>
    </el-table>
    <div class="border">
      <p>费用信息</p>
    </div>
    <el-table :data="ProductList" border style="width: 100%">
      <el-table-column prop="stock" label="商品合计"> </el-table-column>
      <el-table-column prop="stock" label="活动优惠"> </el-table-column>
      <el-table-column prop="stock" label="订单总金额"> </el-table-column>
      <el-table-column prop="stock" label="应付款金额"> </el-table-column>
    </el-table>

    <el-dialog title="备注详情" :visible.sync="dialogTableVisible">
      订单编号 {{ this.orderDetail.OrderNum }}
      <el-table :data="orderDetail" border style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="note" label="备注内容"> </el-table-column>
        <el-table-column prop="consignee" label="创建人"> </el-table-column>
        <el-table-column prop="createAt" label="创建时间"> </el-table-column>
        <el-table-column prop="stock" label="客户可见">
          <el-switch v-model="delevery_type"> </el-switch>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="scope.row"
              type="text"
              size="small"
              icon="el-icon-edit-outline"
              style="color: #4c93ff"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加备注  -->
    <el-dialog title="备注订单" :visible.sync="dialogFormVisible">
      <el-form :model="orderDetail">
        <el-form-item label="商品简介" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.note" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            this.getNote();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetOrderDetail, GetProductList, GetNote } from "@/api/order1";
export default {
  data() {
    return {
      orderDetail: [],
      ProductList: [],
      delevery_type: true,
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  created() {
    this.getOrderDetail();
    this.getProductList();
  },
  methods: {
    getOrderDetail() {
      GetOrderDetail(this.$route.params.id).then((res) => {
        console.log(res.data);
        this.orderDetail = res.data.data;
      });
    },
    getProductList() {
      GetProductList().then((res) => {
        console.log(res.data, "产品详情");
        this.ProductList = res.data.data;
      });
    },
    getNote() {
      GetNote().then((res) => {
        if (res && res.data && res.data.code === 0) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.getOrderDetail();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.border {
  margin: 4px;
  padding-left: 4px;
  border-left: 3px solid rgb(0, 119, 255);
}

.btn {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .status {
    margin-right: 10px;
    width: 160px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: rgba(0, 119, 255, 0.862);
    border-radius: 0 20px 20px 0;
    text-align: center;
  }
  .detail {
    margin-right: 10px;
  }
  .detail,
  .add {
    height: 30px;
    line-height: 1;
    padding-top: 9px;
  }
}
</style>
